<template>
    <div>
        <div class="ksdw_warp">
            <div class="ksdw_warp_comend">
                <div>
                    <img src="../../../assets/image/home/position.png" alt=""></img>
                    <span>
                        {{ activeName }}
                    </span>
                </div>
                <el-icon class="icon_warp" v-show="!isshow" @click="showchange(true)">
                    <CaretBottom />
                </el-icon>
                <el-icon class="icon_warp" v-show="isshow" @click="showchange(false)">
                    <CaretTop />
                </el-icon>
            </div>
        </div>


        <div v-show="isshow" class="ksdw_divs">
            <div class="ksdw_divs_comend">
                <div class="ksdw_divs_comend_header">
                    <span>当前位置:{{ activeName }}</span>
                </div>

                <div class="ksdw_divs_comend_search">
                    <el-input v-model="inputname" style="width: 100%" size="small" placeholder="请输入"
                        :prefix-icon="Search" />
                </div>

                <div class="ksdw_divs_comend_btns">
                    <el-button v-for="item in btnlist"
                        :type="activeRow && activeRow.datakey === item.datakey ? 'isactiveBtn' : ''" :key="item.datakey"
                        size="small" @click="btnClick(item)">{{ item.label }}</el-button>
                </div>

                <div class="ksdw_divs_comend_neirong">
                    <xzq @itemClick="itemClick" v-if="activeRow && activeRow.value === '行政'" />
                    <liiuyu v-if="activeRow && activeRow.value === '流域'" />
                    <qita v-if="activeRow && activeRow.value === '其它'" />
                    <gnq v-if="activeRow && activeRow.value === '功能区'" />
                    <shanhong v-if="activeRow && activeRow.value === '山洪'" />
                    <gongshipai v-if="activeRow && activeRow.value === '公示牌'" />
                    <qushui v-if="activeRow && activeRow.value === '取水口'" />
                    <paiwu v-if="activeRow && activeRow.value === '排污口'" />
                    <shuiyuandi v-if="activeRow && activeRow.value === '水源地'" />
                    <mlhh v-if="activeRow && activeRow.value === '美丽河湖'" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick, getCurrentInstance } from "vue";
import { CaretBottom, CaretTop, Search } from '@element-plus/icons-vue'
import { btntypelist } from '../data/datalist'
import xzq from './comend/xzq.vue'
import liiuyu from "./comend/liiuyu.vue";
import qita from "./comend/qita.vue";
import gnq from "./comend/gnq.vue";
import gongshipai from "./comend/gongshipai.vue";
import shanhong from "./comend/shanhong.vue";
import qushui from "./comend/qushui.vue";
import paiwu from "./comend/paiwu.vue";
import shuiyuandi from "./comend/shuiyuandi.vue";
import mlhh from "./comend/mlhh.vue";

const { appContext } = getCurrentInstance()
let global = appContext.config.globalProperties
const isshow = ref(false)
const activeName = ref('株洲')
const inputname = ref('')
const activeRow = ref(null)
const btnlist = ref(btntypelist)
const showchange = (show) => {
    isshow.value = show
}

const btnClick = (row) => {
    activeRow.value = row
}
const itemClick = (item) => {
    activeName.value = item.name
    let height = 333333
    if (item.level == "区县级") {
        height = 60000
    } else if (item.level == "街道") {
        height = 30000
    }
    global.$viewer.camera.flyTo({
        duration: 0.5,
        destination: Cesium.Cartesian3.fromDegrees(
            item.center[0],
            item.center[1],
            height
        ),
        orientation: {
            heading: Cesium.Math.toRadians(window.mapPosition.heading),
            pitch: Cesium.Math.toRadians(window.mapPosition.pitch),
            roll: 0,
        }, //设置位置

    });
}
onMounted(() => {
    nextTick(() => {
        btnClick(btnlist.value[0])
    })
})
</script>

<style lang="less" scoped>
.ksdw_warp {
    position: absolute;
    z-index: 10;
    left: 26rem;
    top: 6rem;
    background: url(../../../assets/image/home/bg_button.png) no-repeat;
    background-size: inherit;
    min-width: 8rem;

    .ksdw_warp_comend {
        height: 100%;
        width: calc(100% - 1rem);
        background: url(../../../assets/image/home/bg_service_status.png) no-repeat;
        background-size: inherit;
        display: flex;
        align-items: center;
        position: relative;
        padding: 0 0.5rem;
        color: #fff;
        justify-content: space-between;
    }

    img {
        height: 1.2rem;
        width: 1.2rem;
        margin-right: 0.4rem;
    }

    .icon_warp {
        cursor: pointer;
    }
}

.ksdw_divs {
    position: absolute;
    z-index: 10;
    left: 26rem;
    top: 9rem;
    height: 20rem;
    width: 26rem;

    background-size: 100% 100%;
    border: 1px solid #1DE0EF;
    background: rgba(7, 34, 69, .85);
    border-radius: 4px;

    .ksdw_divs_comend {
        height: 100%;
        width: calc(100% - 1rem);
        padding: 0.5rem;

        .ksdw_divs_comend_header {
            height: 2rem;
            width: 100%;
            color: #1DE0EF;
            border-bottom: 1px solid #1DE0EF;
            display: flex;
            align-items: center;
        }

        .ksdw_divs_comend_search {
            margin: 0.5rem;

            ::v-deep(.el-input__wrapper) {
                background: rgba(7, 34, 69, .85);
                box-shadow: none;
                border: 1px solid #1DE0EF;
            }
        }

        .ksdw_divs_comend_btns {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .el-button+.el-button {
                margin-left: 0;

            }

            .el-button {
                margin-right: 0.3rem;
                min-width: 4.5rem;
                background: rgba(0, 0, 0, 0);
                border: 0px;
                color: #fff;
                background-image: url(../../../assets/image/home/menu.png);
                background-size: cover;
                font-size: 0.8rem;
                margin-top: 0.4rem;
            }

            .el-button--isactiveBtn {
                background-image: url(../../../assets/image/home/menu-active.png);
                background-size: cover;
            }
        }


        .ksdw_divs_comend_neirong {
            height: 10rem;
            overflow-y: auto;
            margin-top: 0.5rem;
        }
    }
}
</style>